import { useStorage } from '@/hooks/useStorage'
import { PageToggleClass, SysConfig, SysConfigActions, TabItem } from '@/types/sysConfig'
import { GlobalThemeOverrides } from 'naive-ui'
import { defineStore } from 'pinia'

export const pageClassList: PageToggleClass[] = [
  'offset-bottom',
  'offset-left',
  'offset-right',
  'offset-top',
  'fade',
  'scale'
]

export const useSysConfigStore = defineStore<'sysConfig', SysConfig, any, SysConfigActions>('sysConfig', {
  state: () => ({
    currentLayout: 'LDefault',
    currentRoute: '/home',
    collapsed: false,
    collapsedWidth: 80,
    pageTransitionClass: 'offset-left',
    tabList: [{ path: '/home', name: 'pages.Home', closable: false }],
    themeStyle: {
      '--theme-color': '#08AE34',
      '--theme-color-opacity-9': '#08AE34e6',
      '--theme-color-opacity-8': '#08AE34cc',
      '--theme-color-opacity-7': '#08AE34BF',
      '--theme-color-opacity-6': '#08AE3499',
      '--theme-color-opacity-5': '#08AE3480',
      '--theme-color-opacity-4': '#08AE3466',
      '--theme-color-opacity-3': '#08AE344D',
      '--theme-color-opacity-2': '#08AE3433',
      '--theme-color-opacity-1': '#08AE341A',
      '--silder-width': '260px',
      '--page-bg': '#f0f0f0',
      '--page-color': '#000',
      logo: {
        '--logo-bg': '#5d5f63',
        '--logo-height': '60px',
        '--logo-font-color': '#fff'
      },
      menu: {
        '--menu-bg': '#5d5f63',
        '--menu-active-bg': 'var(--theme-color-opacity-3)',
        '--menu-hover-bg': 'var(--menu-active-bg)',
        '--menu-item-height': '42px',
        '--menu-font-size': '1rem',
        '--menu-font-color': '#fff',
        '--menu-active-font-color': 'var(--theme-color)'
      },
      topbar: {
        '--topbar-bg': '#fff',
        '--topbar-font-color': '#000',
        '--topbar-height': '60px'
      },
      tabs: {
        '--tabs-bg': '#fff',
        '--tabs-font-color': '#000',
        '--tabs-height': '35px'
      }
    },
    dark: false
  }),
  actions: {
    initSysConfig() {
      const config: SysConfig = useStorage('sysConfig')
      if (config) {
        this.$state = config
        this.setThemeVar(config.themeStyle)
        this.toggleDark()
        this.setSliderWidth()
      }
    },

    saveSysConfig() {
      useStorage('sysConfig', this.$state)
    },

    addTab(tab: TabItem) {
      if (this.tabList.findIndex((item) => item.path == tab.path) == -1) {
        this.tabList.push(tab)
      }
      this.currentRoute = tab.path
    },

    removeTab(path: string) {
      const idx = this.tabList.findIndex((item) => item.path == path)
      let currentPath = this.currentRoute
      const len = this.tabList.length
      if (this.currentRoute == this.tabList[idx].path) {
        if (idx == len - 1) {
          // 判断当前是否是最后一个tab
          currentPath = this.tabList[len - 2].path
        } else {
          currentPath = this.tabList[idx + 1].path
        }
      }
      this.currentRoute = currentPath
      this.tabList.splice(idx, 1)
    },

    getNaiveUiOverridesTheme() {
      const lightTheme: GlobalThemeOverrides = {
        common: {
          primaryColor: this.themeStyle['--theme-color'],
          primaryColorHover: this.themeStyle['--theme-color-opacity-8'],
          primaryColorPressed: this.themeStyle['--theme-color-opacity-7'],
          primaryColorSuppl: this.themeStyle['--theme-color-opacity-6']
        },
        Menu: {
          borderRadius: '0px',
          fontSize: this.themeStyle.menu['--menu-font-size'],
          itemHeight: this.themeStyle.menu['--menu-item-height'],
          itemColorActive: this.themeStyle.menu['--menu-active-bg'],
          itemColorActiveCollapsed: this.themeStyle.menu['--menu-active-bg'],
          itemColorHover: this.themeStyle.menu['--menu-hover-bg'],
          itemColorActiveHover: this.themeStyle.menu['--menu-active-bg'],
          itemTextColor: this.themeStyle.menu['--menu-font-color'],
          itemTextColorActive: this.themeStyle.menu['--menu-active-font-color'],
          itemTextColorHover: this.themeStyle.menu['--menu-font-color'],
          itemIconColor: this.themeStyle.menu['--menu-font-color'],
          itemIconColorCollapsed: this.themeStyle.menu['--menu-font-color'],
          itemIconColorActive: this.themeStyle.menu['--menu-active-font-color'],
          itemIconColorHover: this.themeStyle.menu['--menu-font-color']
        },
        Popover: {
          padding: '8px 10px'
        }
      }
      return lightTheme
    },

    toggleDark() {
      if (this.dark) {
        document.documentElement.className = 'dark'
      } else {
        document.documentElement.className = ''
      }
    },

    setThemeVar(obj: any) {
      for (const key in obj) {
        if (typeof obj[key] == 'object') {
          this.setThemeVar(obj[key])
        } else {
          this.updateThemeVar(key, obj[key])
        }
      }
    },

    updateThemeVar(key: string, value: string) {
      if (key == '--theme-color') {
        value = value.slice(0, 7)
        document.documentElement.style.setProperty('--theme-color-opacity-1', value + '1A')
        this.themeStyle['--theme-color-opacity-1'] = value + '1A'
        document.documentElement.style.setProperty('--theme-color-opacity-2', value + '33')
        this.themeStyle['--theme-color-opacity-6'] = value + '33'
        document.documentElement.style.setProperty('--theme-color-opacity-3', value + '4D')
        this.themeStyle['--theme-color-opacity-3'] = value + '4D'
        document.documentElement.style.setProperty('--theme-color-opacity-4', value + '66')
        this.themeStyle['--theme-color-opacity-4'] = value + '66'
        document.documentElement.style.setProperty('--theme-color-opacity-5', value + '80')
        this.themeStyle['--theme-color-opacity-5'] = value + '80'
        document.documentElement.style.setProperty('--theme-color-opacity-6', value + '99')
        this.themeStyle['--theme-color-opacity-6'] = value + '99'
        document.documentElement.style.setProperty('--theme-color-opacity-7', value + 'BF')
        this.themeStyle['--theme-color-opacity-7'] = value + 'BF'
        document.documentElement.style.setProperty('--theme-color-opacity-8', value + 'CC')
        this.themeStyle['--theme-color-opacity-8'] = value + 'CC'
        document.documentElement.style.setProperty('--theme-color-opacity-9', value + 'E6')
        this.themeStyle['--theme-color-opacity-9'] = value + 'E6'
      }
      document.documentElement.style.setProperty(key, value)
    },

    setSliderWidth() {
      document.documentElement.style.setProperty(
        '--silder-width',
        this.collapsed ? this.collapsedWidth + 'px' : this.themeStyle['--silder-width']
      )
    }
  }
})
